<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>前端开发-董浩</title>
  <script src="//at.alicdn.com/t/c/font_4270817_j4oytohl8n8.js"></script>
  <style>
    .container {
      min-width: 900px; height: 100vh;
      overflow-y: scroll;
      scroll-snap-type: y mandatory; scroll-behavior: smooth;
      position: relative;
    }
    section {
      color: #fff; font-size: 20px;
      height: 100vh;
      overflow: hidden;
      scroll-snap-align: start;
    }
  </style>
</head>
<body>
  <div class="container">

    <nav>
      <a href="#work">工作经历</a>
      <a href="#opus">个人作品</a>
      <a href="#summary"></a>
      <a href="#skill">能力水平</a>
      <a href="#other">其他方面</a>
    </nav>

    <!-- 个人简介 -->
    <section id="summary">
      <img class="bg" src="./images/1.jpg" alt="bg">
      <div class="content">
        <h1>Hi，我是董浩（BarryDong）</h1>
        <div class="intro">
          <ul>
            <li>自学前端，2019年09月正式入行，迄今已有 4 年多前端开发经验</li>
            <li>参与过个人独立开发、多人团队协作等多个项目，具有 H5/淘宝小程序/PC/Pad 等多端开发经验</li>
            <li>追求代码干净、整洁、易懂，因为代码是写给人看的</li>
            <li>有产品和用户思维，对于页面交互设计及用户体验可以提出相关建议</li>
            <li>
              持续自主学习，先后在知乎、掘金发布多篇博客，并于近期建立了个人笔记网站
              <div class="bolg">
                <a class="mySite" href="https://dongdong12138.github.io/">我的网站</a>
                <a class="zhihu" href="https://www.zhihu.com/people/dongdong12138/activities">我的知乎</a>
                <a class="juejin" href="https://juejin.cn/user/1855631360790110">我的掘金</a>
              </div>
            </li>
          </ul>
          <img class="picture" src="./images/avatar.jpg" alt="avatar">
        </div>
        <div class="downArrow">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-down"></use>
          </svg>
          <span>向下滚动查看更多</span>
        </div>
      </div>
    </section>

    <!-- 工作经历 -->
    <section id="work">
      <div class="work1">
        <p class="company"><span>2019-09 ~ 2022-04</span><span>上海莫凡信息技术有限公司</span></p>
        <p><strong>项目类型：</strong>H5、淘宝小程序</p>
        <p><strong>技术栈：</strong>Vue2、Vuex、Axios、Pixi.js、淘宝小程序</p>
        <p>
          <strong>项目概述：</strong>该公司项目皆为 H5、淘宝小程序类型，投放于淘宝 APP 相关店铺首页，主要用
          于为店铺引流，获取到更多的用户及会员，并为参与互动并符合条件的用户进行抽奖。各项目
          除了需要<em>高度还原设计稿</em>，还需要实现一些复杂的功能、动画，如<em>刮刮卡效果</em>、<em>序列帧动画</em>、
          <em>抽奖动画</em>、<em>手势识别</em>、<em>脸部肌肤检测</em>、<em>Canvas 生成海报长按下载</em>等等。
        </p>
        <ul>
          <li><strong>工作成果：</strong></li>
          <li>使用 CSS3 新特性解决了团队成员在开发 H5 项目时机型适配问题；</li>
          <li>将“Pixi.js 制作序列帧动画”这一常见需求封装成通用方法，供团队使用；</li>
          <li>将一些复杂的 CSS 动画效果代码形成模板，供团队使用；</li>
          <li>将西安分公司负责的“店铺装修”业务带到上海总部开展。</li>
        </ul>
      </div>
      <div class="work2">
        <p class="company"><span>2022-07 ~ 2023-12</span><span>上海欧睿供应链管理有限公司</span></p>
        <p><strong>负责项目：</strong>IMO 智能商品运营系统、APO 选款下单系统</p>
        <p><strong>技术栈：</strong>Vue2、Vue Router、Vuex、Axios、SCSS、ElementUI、vxe-table、ECharts 等</p>
        <p>
          <strong>项目概述：</strong>针对大型化妆品、鞋服类公司，IMO 进行算法预测完成补调、补仓任务，并为客
          户提供分货和调拨等数据；APO 实现客户总部和区域间选款订货协同，实现更精准的订单与
          需求匹配。
        </p>
        <ul>
          <li><strong>工作成果：</strong></li>
          <li>对 APO 选款下单系统 Pad 端进行<em>整体 UI 升级</em>，并根据客户身份使用不同主题色；</li>
          <li><em>封装了多个通用业务组件</em>供后端使用，提高了后端开发效率，部分组件发布在 npm；</li>
          <li>参与公司内部组件（oibp-table）的维护与优化，如<em>表格的虚拟滚动</em>等；</li>
          <li>针对 IMO 智能商品运营系统，基于 oibp-table 组件，开发<em>“多级表头”通用逻辑</em>。</li>
        </ul>
      </div>
    </section>

    <!-- 个人作品 -->
    <section id="opus">
      <dl class="online">
        <dt>在线作品</dt>
        <dd>
          <a href="https://dongdong12138.github.io/nuomi-ui-vue/#/">
            <img src="./images/nuomi-ui.png" alt="nuomi-ui">
            <div class="modal">
              <p>开发时间：2023年12月10日。</p>
              <p>这是一款基于 Vue3.3 和 TypeScript 的 UI 组件库，并提供了官方文档，可在线查看代码示例。</p>
            </div>
          </a>
        </dd>
        <dd>
          <a href="https://dongdong12138.github.io/pikachu/dist/index.html">
            <img src="images/pikaqiu.png" alt="皮卡丘">
            <div class="modal">
              <p>开发时间：2021年08月02日。</p>
              <p>将皮卡丘的 CSS 代码书写在页面上，演示了绘制一只皮卡丘的过程，此项目适合在移动端观看。</p>
            </div>
          </a>
        </dd>
        <dd>
          <a href="https://dongdong12138.github.io/canvas/index.html">
            <img src="./images/canvas.png" alt="Canvas 画板">
            <div class="modal">
              <p>开发时间：2018年08月31日。</p>
              <p>这是一个基于 Canvas 实现的简单画板，提供了切换笔触、颜色、粗细、橡皮擦、保存图片等功能。</p>
            </div>
          </a>
        </dd>
        <dd>
          <a href="https://dongdong12138.github.io/keyboard-nav/index.html">
            <img src="./images/keyboard-nav.png" alt="键盘导航">
            <div class="modal">
              <p>开发时间：2018年08月29日。</p>
              <p>这是一个键盘导航项目，按下键盘按键即可跳转到对应网址，同时也提供了编辑按键对应的网址功能。</p>
            </div>
          </a>
        </dd>
        <dd>
          <a href="https://barrydong.gitee.io/gorgeous-timing-effect/">
            <img src="./images/timing.png" alt="炫丽的倒计时效果">
            <div class="modal">
              <p>开发时间：2020年11月04日。</p>
              <p>这是一个基于 Canvas 实现的炫丽的倒计时效果，每一个切换的数字都会随机蹦出彩色的小球掉落。</p>
            </div>
          </a>
        </dd>
      </dl>
      <dl class="node">
        <dt>node 工具</dt>
        <dd>
          <a href="https://www.npmjs.com/package/node-fanyi-dong">
            <img src="./images/node-fanyi.png" alt="node-fanyi">
            <div class="modal">
              <p>开发时间：2022年06月11日。</p>
              <p>这是一个基于 node 的 https 模块开发的命令行翻译工具，支持中英互译。</p>
            </div>
          </a>
        </dd>
        <dd>
          <a href="https://www.npmjs.com/package/node-todo-dong">
            <img src="./images/node-todo.png" alt="node-todo">
            <div class="modal">
              <p>开发时间：2022年06月09日。</p>
              <p>这是一个基于 node 的 fs 模块开发的命令行 todo 工具，提供了基本的增删改查方法。</p>
            </div>
          </a>
        </dd>
        <dd>
          <a href="https://www.npmjs.com/package/node-server-dong">
            <img src="./images/node-server.png" alt="node-server">
            <div class="modal">
              <p>开发时间：2022年06月10日。</p>
              <p>这是一个基于 node 的 http 模块开发的 server 工具，用于在命令行中启动一个本地服务器。</p>
            </div>
          </a>
        </dd>
      </dl>
      <div class="icon-box">
        <a href="https://github.com/dongdong12138">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-github"></use>
          </svg>
        </a>
        <a href="https://gitee.com/barrydong">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gitee"></use>
          </svg>
        </a>
      </div>
    </section>

    <!-- 能力水平 -->
    <section id="skill">
      <h3>技能水平</h3>
      <ul>
        <li>熟练使用 HTML5、CSS3 进行语义化的页面结构搭建及页面样式、动画等的开发，有 Canvas、SVG 使用经验</li>
        <li>熟练使用 SCSS 编写样式，能够结合 BEM 命名规范清晰结构层级关系，提高 CSS 代码可读性</li>
        <li>熟练使用 JavaScript 及 ES6 新特性，习惯利用 ES Module 合理组织代码</li>
        <li>可以使用 Webpack 处理常见资源，配置开发服务器，了解 Webpack 常见优化方案</li>
        <li>熟练使用 Vue 全家桶，有丰富的 Vue2 项目开发经验，具备封装通用组件的能力，以及基于 ElementUI 进行二次封装的能力，并在 npm 上有发布开源组件</li>
        <li>熟悉 Vue3 新特性及一些常用的 Composition API，能够自定义 hook 函数，提高代码可读性和复用性，有 Vue3 移动端项目经验</li>
        <li>熟练使用 Git 管理代码，能够快速解决团队协作中代码冲突的问题</li>
        <li>有 ElementUI、vxe-table、Echarts、Axios、Pixi.js 等第三方库的使用经验</li>
        <li>有性能优化经验，具备独立开发能力，并能协助团队其他成员解决问题</li>
        <li>有产品和用户思维，对于页面交互设计及用户体验可以提出相关建议</li>
        <li>可以使用 SQL 语句进行基础的数据库增删改查等操作</li>
      </ul>
    </section>

    <!-- 其他方面 -->
    <section id="other">
      <dl class="hobby">
        <dt>兴趣爱好</dt>
        <dd>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-trekking"></use>
          </svg>
          <span>爬山</span>
        </dd>
        <dd>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-CAMERA"></use>
          </svg>
          <span>摄影</span>
        </dd>
        <dd>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-run"></use>
          </svg>
          <span>跑步</span>
        </dd>
        <dd>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-huaxue"></use>
          </svg>
          <span>滑雪</span>
        </dd>
      </dl>
      <dl class="contact">
        <dt>联系方式</dt>
        <dd>手机：17621276004</dd>
        <dd>微信：dong286084845</dd>
        <dd>邮箱：17621276004@163.com</dd>
        <dd>
          <img src="./images/wechat.png" alt="微信二维码">
          <p>扫描上方二维码，添加我的微信</p>
        </dd>
      </dl>
    </section>

  </div>
</body>
</html>
